<template>
    <div class="container">
        <a-page-header style="border: 1px solid rgb(235, 237, 240)" :title="tableName + '表'"
            @back="() => router.back()">
            <template #extra>
                <DownloadOutlined style="font-size: .5rem;" @click="exportData" />
            </template>
        </a-page-header>
        <a-table v-if="tableName !== 'device'" :scroll="{ x: 0, y: 1000 }" bordered :columns="columns"
            :dataSource="tableData" :pagination="pagination" @change="changeData">
            <template #bodyCell="{ record, column }">
                <template v-if="column.dataIndex === 'putImg'">
                    <a-image :src="imgSrc(record.putImg)" alt="" :width="80" />
                </template>
                <template v-if="column.dataIndex === 'outImg'">
                    <a-image :src="imgSrc(record.outImg)" alt="" :width="80" />
                </template>
            </template>
        </a-table>

        <a-card v-else>
            <p class="deviceItem" v-for="(value, key) in tableData[0]" :key="key">
                <span>{{ deviceLabel[key as keyof typeof deviceLabel] }}</span>:
                <span>{{ value }}</span>
            </p>
        </a-card>

        <!-- <a-button @click="()=>router.back()">返回</a-button> -->
    </div>
</template>
<script setup lang="ts">
import { db } from '@/utils/DexieDB'
import { deviceLabel } from '@/utils/EnumLabel'
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import TableColumns from '@/utils/TableColumns';
import { convertDataToStringWithOrder, isAndroid } from '@/utils/UtilFun';
import { DownloadOutlined } from '@ant-design/icons-vue';



type tName = 'device' | 'testTube' | 'testTubeHistory' | 'nurse' | 'whites' | 'error' | 'disinfect' | 'retryTasks'



const router = useRouter();
const tableName = router.currentRoute.value.query.tableName as tName
const columns = TableColumns[tableName as keyof typeof TableColumns]

const tableData = ref<Array<testTube | testTubeHistory | device | nurse | white | error | disinfect | RetryTask>>([]);



const currentPage = ref(1);
const pageSize = ref(10);

const pagination = computed(() => {
    return {
        total: tableData.value.length,
        showTotal: () => `总共${tableData.value.length}条数据`,
        pageSize: pageSize.value,
        current: currentPage.value,
        hideOnSinglePage: true,
        onChange: (page: number, size: number) => {
            currentPage.value = page;
            pageSize.value = size;
        }
    }
})

async function getAllData() {
    tableData.value = await db[`${tableName}`].toArray()
    console.log(tableData.value);

}

function imgSrc(img: File | Blob) {
    // console.log(img);
    if (img instanceof File) {
        return URL.createObjectURL(img)
    } else {
        return img
    }
}

function changeData(pagination: any) {
    currentPage.value = pagination.current;
    pageSize.value = pagination.pageSize;
}

function exportData() {
    const csvData = convertDataToStringWithOrder(tableData.value, tableName)
    // exportToCSV(tableData.value, recordsName[recordType as RecordType])
    if (isAndroid()) {
        window.ClosetAndroid.exportCsvData(csvData, `${tableName}.csv`)
    }
}


onMounted(async () => {
    getAllData()
})
</script>
<style lang="scss" scoped>
.container {
    :deep(.ant-page-header-back) {
        font-size: .4rem;
    }

    :deep(.ant-page-header-heading-title) {
        font-size: .5rem;
        line-height: .6rem;
    }
}

.deviceItem {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: .325rem;
    margin-bottom: .125rem;

    &>span {
        width: 4rem;
    }
}
</style>